/* 
* 科技有限公司版权所有（）.
* Copyright (c) 2019,   and/or its affiliates. All rights reserved.
* @Date: 2020.09.01 22:47.
* @Author 
* @Description  项目 - 手机白名单
**/
<template>
  <div class="pr-role">
    <div class="text-align mb10">
      <el-button type="primary" @click="handleAddClick" size="mini">添加手机号</el-button>
    </div>

    <el-table :data="tableData" border class="mt10">
      <el-table-column prop="phone" label="手机号"></el-table-column>
      <el-table-column prop="createTime" label="添加时间"></el-table-column>

      <el-table-column label="操作" width="200px">
        <template slot-scope="scope">
          <el-button @click.native.prevent="handleOperaClick(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination background @current-change="handleCurrentChange" :page-size="100" layout="total, prev, pager, next" :hide-on-single-page="true" :total="total">
    </el-pagination>
    <!-- 新增 弹窗 -->
    <el-dialog title="添加手机白名单" :visible.sync="dialogVisible" width="450px">

      <el-form :model="ruleForm" ref="ruleForm" label-width="100px">

        <el-form-item label="手机号：">
          <el-input v-model="ruleForm.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handlePhoneClick">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import dayjs from 'dayjs'
import urls from '@/api/urls'
import { postData, getData } from '@/api/'
export default {
  name: 'Phone',
  props: {},
  components: {},
  data() {
    return {
      total: 0,
      searchForm: {
        pageNum: 1, // 当前页
        pageSize: 100, // 每页条数
      },
      ruleForm: {
        phone: '',
        createTime: '',
      },
      tableData: [],
      dialogVisible: false, // 新增编辑弹窗
    }
  },
  watch: {},
  created() {
    this.getPhoneList()
  },
  mounted() { },
  methods: {
    /**
     *@Description
     *@Return 角色管理 - 新增角色 按钮事件监听.
     **/
    handleAddClick() {
      this.dialogVisible = true
    },
    handlePhoneClick() {
      if (this.ruleForm.phone.length == 11) {
        this.ruleForm.createTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
        postData(this.ruleForm, urls.savePhoneUrl).then(res => {
          this.getPhoneList()
          this.$message.success('添加成功！')
          this.dialogVisible = false
          console.log('savePhoneUrl----', res)
        })
      } else {
        this.$message.warning('输入手机号有误！')
        return false
      }
    },
    /**
    *@Description
    *@Return 删除.
    **/
    handleOperaClick(data) {
      this.$confirm('确定删除吗？', '删除确认', {
        type: 'warning',
        cancelButtonText: '取消',
        confirmButtonText: '确定删除',
      }).then(() => {
        getData({ id: data.id }, urls.delPhoneUrl).then(res => {
          this.getPhoneList()
          this.$message.success('删除成功！')
          console.log('delPhoneUrl----', res)
        })
      })
    },
    /**
     *@Description
     *@Return 手机列表.
     **/
    getPhoneList() {
      getData(this.searchForm, urls.phoneListUrl).then(res => {
        this.total = res.result && res.result.total
        this.tableData = res.result && res.result.data
      })
    },
    /**
     *@Description
     *@Return 分页事件.
     **/
    handleCurrentChange(val) {
      this.searchForm.pageNum = val
      this.getPhoneList()
    },
  }
}

</script>
<style lang="scss" scoped="scoped">
.pr-role {
  .text-align {
    text-align: right;
  }
  ::v-deep .el-table td,
  .el-table th {
    padding: 0;
  }
}
</style>
